<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link th:replace="publicPart ::commonHead">
    <style>
        body, #main {
            margin: 0;
            padding: 0;
            background-image: url("https://cdn.acwing.com/static/web/img/background.png");
            background-repeat: repeat;
        }
    </style>
</head>

<body>
<!-- 注册表单 -->
<div class="main">
    <div class="container rounded" style="padding-top: 20px; margin-top:120px;max-width: 400px ; border: solid 1px">
        <form style="" id="form" action="signUp">
            <div class="font-weight-bold" style="text-align: center;margin-bottom: 10px">
                用户注册
            </div>
            <div class="form-group  d-flex">
                <!--                <label for="user" stype="display:inline;"></label>-->
                <!--                <input type="text" class="form-control" name="loginName" id="user" style="display:inline;width:200px;"autocomplete="off" placeholder="用户名" onblur="validateusername();"/>-->
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="用户名" id="user" name="loginName"
                           autocomplete="off" onblur="validateusername()">
                    <div class="input-group-append">
                    </div>
                </div>
                <!--                <span style="color: red;" id="tip1"></span>-->
                <!--                <span style="color: red;" th:text="${msg}"></span>-->
            </div>
            <div class="form-group  d-flex">
                <!--                <label for="password" style="display:inline;"></label>-->
                <!--                <input type="password" class="form-control" name="loginPwd" id="password" style="display:inline;width:200px;"autocomplete="off" placeholder="密码" onblur="validatepassword();"/>-->
                <div class="input-group mb-3">
                    <input type="password" class="form-control" placeholder="密码" id="password" name="loginPwd"
                           autocomplete="off" onblur="validatepassword()">
                    <div class="input-group-append">
                    </div>
                </div>
                <!--                <span style="color: red;" id="tip2"></span>-->
            </div>
            <div class="form-group  d-flex">
                <!--                <label for="rpassword" style="display:inline; "></label>-->
                <!--                <input type="password" class="form-control" id="rpassword" style="display:inline;width:200px;"autocomplete="off" placeholder="确认密码" onblur="validaterpassword();"/>-->
                <div class="input-group mb-3">
                    <input type="password" class="form-control" placeholder="确认密码" id="rpassword" autocomplete="off"
                           onblur="validaterpassword()">
                    <div class="input-group-append">
                    </div>
                </div>
                <!--                <span style="color: red;" id="tip3"></span>-->
            </div>
            <div class="form-group  d-flex">
                <!--                <label for="tel" stype="display:inline;"></label>-->
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="联系电话" id="tel" name="userPhone"
                           autocomplete="off">
                </div>
                <!--                <input type="text" class="form-control" id="tel" name="userPhone" style="display:inline;width:200px;"autocomplete="off" placeholder="联系电话"/>-->
            </div>
            <div class="form-group  d-flex">
                <!--                <label for="email" stype="display:inline;"></label>-->
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="Email" id="email" name="userEmail"
                           onblur="validateemail();">
                    <div class="input-group-append">
                        <!--                        <span class="input-group-text">@nhooo.com</span>-->
                        <select class="input-group-append" id="emailend" name="emailend">
                            <option class="input-group-text" value="@qq.com" selected="selected">@qq.com</option>
                            <option class="input-group-text" value="@163.com">@163.com</option>
                            <option class="input-group-text" value="@189.com">@189.com</option>
                        </select>
                    </div>
                </div>
                <!--                <input type="text" class="form-control" id="email" name="userEmail" style="display:inline;width:200px;"autocomplete="off" placeholder="电子邮件" onblur="validateemail();"/>-->
                <!--                <span style="color: red;" id="tip4"></span>-->
            </div>
            <div class="form-group  d-flex" style="margin-bottom: 3px">
                <!--                <label for="tel" stype="display:inline;"></label>-->
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="验证码" id="identify" name="userCheckcode"
                           autocomplete="off" onblur="validateident()"/>
                    <div class="input-group-append">
                        <!--                        <span class="input-group-text">@nhooo.com</span>-->
                        <!--                        <button type="button" id="getident"  class="btn btn-secondary">发送验证码</button>-->
                        <input id="btnSendCode"
                               style="width: 120px;height: 39px;text-align: center;background-color: white;border: 1px solid #E2E2E2;"
                               type="button" value="获取验证码" onclick="sendMessage();">
                    </div>
                </div>
                <!--                <input type="text" class="form-control" id="tel" name="userPhone" style="display:inline;width:200px;"autocomplete="off" placeholder="联系电话"/>-->
            </div>
            <span id="tip" style="color: red;"></span>
            <!--                <label for="tel" stype="display:inline;"></label>-->
            <center>
                <button style="margin-top: 5px" type="button" class=" btn btn-primary " id="btnReg">确认注册</button>
            </center>
            <div style="margin-top: 10px"></div>
        </form>
    </div>
</div>
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">提示</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div>注册成功！需要添加人脸信息吗？</div>
<!--                <form id="editform">-->
<!--                    &lt;!&ndash;                    存放要修改数据的主键，作为条件使用&ndash;&gt;-->
<!--                    <input type="hidden" name="blogId" id="editblogId">-->
<!--                </form>-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick='tomain()'>取消</button>
                <button type="button" class="btn btn-primary" onclick='faceadd()'>确定</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    //首先获取表单的Input对象
    let username = document.getElementById("user");
    let password = document.getElementById("password");
    let rpassword = document.getElementById("rpassword");
    let textemail = document.getElementById("email");
    let ident = document.getElementById("identify");
    let emailend = document.getElementById("emailend");
    let span1 = document.getElementById("tip");

    function validateusername() {
        let value = username.value;
        if (!value) {
            span1.innerHTML = "用户名不能为空";
            // funValue1 = false;
            return false;
        } else if (value.length < 2 || value.length > 11) {
            span1.innerHTML = "用户名的长度2-12位";
            // funValue1 = false;
            return false;
        } else {
            span1.innerHTML = "";
            // funValue1 = true;
            return true;
        }

    }

    function validatepassword() {
        let value = password.value;
        if (!value) {
            span1.innerHTML = "密码不能为空";
            // funValue2 = false;
            return false;
        } else if (value.length < 2 || value.length > 11) {
            span1.innerHTML = "密码的长度2-12位";
            // funValue2 = false;
            return false;
        } else {
            span1.innerHTML = "";
            // funValue2 = true;
            return true;
        }
    }

    function validaterpassword() {
        let pwdValue = password.value;
        let value = rpassword.value;
        if (!value) {
            span1.innerHTML = "确认密码不能为空";
            // funValue3 = false;
            return false;
        } else if (value != pwdValue) {
            span1.innerHTML = "输入的密码不相等";
            // funValue3 = false;
            return false;
        } else {
            span1.innerHTML = "";
            // funValue3 = true;
            return true;
        }
    }

    function validateemail() {
        let email = textemail.value;
        if (!email) {
            span1.innerHTML = "邮箱不能为空";
            return false;
        } else {
            return true;
        }
    }

    function validateident() {
        let identy = ident.value;
        if (!identy) {
            span1.innerHTML = "验证码不能为空";
            return false;
        } else {
            return true;
        }
    }
    function faceadd(){
        window.location.href = "/demo/faceAdd";
    }
    function tomain(){
        window.location.href = "/demo/main";
    }

    jQuery(function () {
        jQuery("#btnReg").click(function () {
            if (validateusername() && validatepassword() && validaterpassword() && validateemail()) {
                let form = jQuery("#form").serialize();
                form = form.replace(/&emailend=/, '')

                jQuery.post("/demo/signUp", form, function (rst) {
                    if (rst != "注册成功") {
                        span1.innerText = rst;
                    }else
                    {
                        jQuery("#editModal").modal("show");
                    }
                })
            } else {
                $("#btnReg").attr("type", "button")
            }
        })
    });


    //验证码时间
    var InterValObj; //timer变量，控制时间
    var count = 60; //间隔函数，1秒执行
    var curCount;//当前剩余秒数
    //发送短信验证码
    function sendMessage() {
        let emailStart = $("#email").val()
        let emailEnd = $("#emailend").val()
        jQuery.post("/demo/email", "userEmail=" + emailStart + emailEnd, function (rst) {

        });

        curCount = count;

        // 设置button效果，开始计时
        document.getElementById("btnSendCode").setAttribute("disabled", "true");//设置按钮为禁用状态
        document.getElementById("btnSendCode").value = curCount + "秒后重获";//更改按钮文字
        InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器timer处理函数，1秒执行一次
    }

    //timer处理函数
    function SetRemainTime() {
        if (curCount == 0) {//超时重新获取验证码
            window.clearInterval(InterValObj);// 停止计时器
            document.getElementById("btnSendCode").removeAttribute("disabled");//移除禁用状态改为可用
            document.getElementById("btnSendCode").value = "重获验证码";
        } else {
            curCount--;
            document.getElementById("btnSendCode").value = curCount + "秒后重获";
        }
    }
</script>
</html>